import styles from './index.less';
import {useCallback, useEffect, useState} from "react";

export default function IndexPage() {
  const svgX = 1800
  const svgY = 900


  const circleX = svgX / 2
  const circleY = svgY / 2


  const [state, setState] = useState({
    dragging: false,
    mouseDownX: 0,
    mouseDownY: 0,
    centerX: 0,
    centerY: 0,
    mouseX:0,
    mouseY:0,
    radius: 0
  })

  const mouseDown = (e: any) => {
    console.log(`鼠标按下的坐标是`, `${e.clientX}-----------${e.clientY}`)
    setState((prestate) => ({
      ...prestate,
      dragging: true,
      mouseDownX: e.clientX,
      mouseDownY: e.clientY,
    }))
  }
  const mouseMove = (e: any) => {
    const XDiff = e.clientX - state.mouseDownX
    const YDiff = e.clientY - state.mouseDownY
    if (state.dragging){
      setState((prestate) => ({
        ...prestate,
        dragging: true,
        mouseX: e.clientX,
        mouseY: e.clientY,
        centerX: (e.clientX+state.mouseDownX)/2,
        centerY: (e.clientY+state.mouseDownY)/2,
        radius: Math.abs((Math.sqrt(Math.pow(XDiff,2)+Math.pow(YDiff,2))/2)),
      }))
    }
  }
  const mouseUp = (e: any) => {
    setState((prestate) => ({
      ...prestate,
      dragging: false,
    }))
  }



  return (
    <div onMouseDown={mouseDown} onMouseUp={mouseUp} onMouseMove={mouseMove}>

      <svg width={svgX} height={svgY} className={styles.svgArea}>
        <circle cx={state.centerX} cy={state.centerY} r={state.radius} className={styles.circle}/>
      </svg>
      <p>圆心坐标：{state.centerX},{state.centerY},半径为{state.radius}</p>
    </div>
  );
}
